/*
 * 图片
 */

import * as React from 'react';

import { Spin } from 'antd';
import Selector from './Selector';

import { isLoading } from 'utils/utils';
import ACTIONS from 'constants/attachment';

import makeHoc from 'components/common/makeHoc';

const serviceType = 0;

interface ImageProps {
  dispatch: (action: any) => any;
  handleFetchAttachList: (data: Record<string, any>) => any;
  handleCheckChange: () => any;
  loadingGroup: any;
  attachList: object[];
  selectedItems: object[];
  doSelect?: boolean;
  selectMax?: number;
}

class Image extends React.Component<ImageProps> {
  static defaultProps: ImageProps = {
    dispatch: () => {},
    handleFetchAttachList: () => {},
    handleCheckChange: () => {},
    loadingGroup: {},
    attachList: [],
    selectedItems: [],
    doSelect: false,
    selectMax: 0,
  };

  handleFetchImageList = () => {
    this.props.handleFetchAttachList({ type: serviceType });
  };

  render() {
    const {
      loadingGroup,
      handleCheckChange,
      attachList,
      selectedItems,
      doSelect,
      selectMax,
    } = this.props;

    const imgWH = 140;

    return (
      <Spin spinning={isLoading(loadingGroup, ACTIONS.FETCH_ATTACHMENT_LIST)} tip="Loading...">
        {attachList.length > 0 ? (
          <ul className="asset-gallery" style={{ listStyle: 'none', padding: 0, margin: 4 }}>
            {attachList.map((image: any) => {
              return (
                <li
                  key={image.id}
                  className="gallery-item"
                  style={{
                    background: 'white',
                    float: 'left',
                    marginRight: 16,
                    marginBottom: 16,
                    border: '1px solid #e7e7eb',
                    width: imgWH,
                  }}>
                  <div
                    style={{
                      display: 'flex',
                      alignItems: 'center',
                      width: imgWH,
                      height: imgWH,
                      overflow: 'hidden',
                    }}>
                    <a
                      style={{ display: 'block' }}
                      href={image.uri}
                      title="查看原图"
                      target="_blank"
                      rel="noopener noreferrer">
                      <img src={image.uri} width={imgWH} />
                    </a>
                  </div>
                  <Selector
                    className="gallery-item-name"
                    handleCallback={this.handleFetchImageList}
                    onChange={handleCheckChange}
                    selectedItems={selectedItems}
                    item={image}
                    isCheck={!!doSelect}
                    selectMax={selectMax}
                  />
                </li>
              );
            })}
          </ul>
        ) : (
          <p className="loading-placeholder">还没有图片</p>
        )}
        <div className="clear-both" />
      </Spin>
    );
  }
}

function mapStateToProps(state: any) {
  const { loadingGroup } = state;
  const { attachList, selectedItems } = state.attachment;

  return {
    loadingGroup,
    attachList,
    selectedItems,
  };
}

export default makeHoc(mapStateToProps)(Image, {
  fetchImageList(filter: any = {}) {
    this.handleFetchImageList(filter, true);
  },
});
